<template>
	<view class="messge">
		<uni-section title="选择就餐人数" type="line" style="margin-bottom: 3px;">
			<view class="box-bg">
				<uni-nav-bar height="150rpx" left-icon="left" title="选择就餐人数" @clickLeft="back" />
			</view>
		</uni-section>
		<view class="choose">请选择就餐人数</view>
		<view class="num">
			<view @click="chooseNumber(1)" class="item" :class="[number==1?'active':'']">1</view>
			<view @click="chooseNumber(2)" class="item" :class="[number==2?'active':'']">2</view>
			<view @click="chooseNumber(3)" class="item" :class="[number==3?'active':'']">3</view>
			<view @click="chooseNumber(4)" class="item" :class="[number==4?'active':'']">4</view>
			<view @click="chooseNumber(5)" class="item" :class="[number==5?'active':'']">5</view>
			<view @click="chooseNumber(6)" class="item" :class="[number==6?'active':'']">6</view>
			<view @click="chooseNumber(7)" class="item" :class="[number==7?'active':'']">7</view>
			<view @click="chooseNumber(8)" class="item" :class="[number==8?'active':'']">8</view>
			<view @click="chooseNumber(9)" class="item" :class="[number==9?'active':'']">9</view>
			<view @click="chooseNumber(10)" class="item" :class="[number==10?'active':'']">10</view>
			<view @click="chooseNumber(11)" class="item" :class="[number==11?'active':'']">11</view>
			<view @click="chooseNumber(12)" class="item" :class="[number==12?'active':'']">12</view>
		</view>
		<!-- <view class="choose">填写手机号码</view>
		<view class="phone">
			<view class="pho">+86
				<image
					src="https://cdn3.axureshop.com/demo/2116044/images/%E5%8F%96%E5%8F%B7%E4%BF%A1%E6%81%AF/u2012.png">
				</image>
				<input placeholder="请输入您的手机号码" v-model="tel" />
			</view>
		</view> -->
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content"><button @click="confirm" class="bottom">开始点餐</button></view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tel: '',
				number: '',
				id:''
			}
		},
		methods: {
			chooseNumber(number) {
				this.number = number;
				this.$refs.popup.open('bottom');
				console.log(number)
			},
			confirm() {
				// console.log('number=' + this.number);
				uni.setStorageSync('shopid',this.id);
				uni.setStorageSync('number',this.number);
				uni.switchTab({
					url:'/pages/Dine-in/Dine-in'
				})
			},
			back(){
				uni.redirectTo({
					url:'/pages/choiceinshop/choiceinshop'
				})
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			if (option.id != undefined) {
				console.log(option.id); //打印出上个页面传递的参数。
				this.id = option.id;
				console.log('this.id:' + this.id);
				// console.log(option.name); //打印出上个页面传递的参数。
			} else {
				console.log('默认id=' + this.id);
			}
		},
	}
</script>

<style>
	.uni-navbar__content.data-v-6bda1a90.uni-navbar--border {
		border: none;
	}

	.messge {
		/* background-color: rgb(245, 247, 247); */
		padding-bottom: 500rpx;
	}

	/* #f77214 */
	.num {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.num view {
		padding: 40rpx;
		margin: 20rpx;
		background-color: #d9d9d9;
		width: 50rpx;
		height: 50rpx;
		color: black;
		font-size: 40rpx;
		border-radius: 20rpx;
		text-align: center;
	}

	.choose {
		/* margin: 20rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
		padding:20rpx;
	}

	.phone {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pho {
		display: flex;
		border: 2rpx solid #f77214;
		justify-content: center;
		align-items: center;
		width: 600rpx;
		border-radius: 20rpx;
		padding: 10rpx;
		color: #a7a7a7;
	}

	.pho image {
		width: 6rpx;
		height: 30rpx;
		padding: 10rpx;
	}

	.pho input {
		color: black;
	}

	.num .item.active {
		background-color: #f77214;
		color: #fff;
	}

	.bottom {
		background-color: #f77214;
		color: #fff;
		border-radius: 50rpx;
		margin: 20rpx;
	}
</style>
